<template>
	<view class="content">
		<view class="table-name">
			<span style="display: flex;align-items: center;flex-direction: row;"><image src="../../../static/img/pet-carrier.png" style="width: 30rpx;height: 30rpx;margin-right: 20rpx;" mode=""></image> 领养的宠物</span>
			<input type="text" :value="options.name" disabled="" placeholder="宠物昵称" />
		</view>
		<view class="table-selector">
			<span>我的性别</span>
			<span :class="sex == 1?'sexActivate':''" @click="sex = 1">男性</span>
			<span :class="sex == 0?'sexActivate':''" @click="sex = 0">女性</span>
		</view>
		<view class="table-selector">
			<span>我的年龄</span>
			<span :class="age == 1?'sexActivate':''" @click="age = 1">00后</span>
			<span :class="age == 2?'sexActivate':''" @click="age = 2">90后</span>
			<span :class="age == 3?'sexActivate':''" @click="age = 3">80后</span>
			<span :class="age == 4?'sexActivate':''" @click="age = 4">70后</span>
		</view>
		<view class="table-selector">
			<span>居住情况</span>
			<span :class="live == 1?'sexActivate':''" @click="live = 1">自住</span>
			<span :class="live == 2?'sexActivate':''" @click="live = 2">整租</span>
			<span :class="live == 3?'sexActivate':''" @click="live = 3">合租</span>
		</view>
		<view class="table-selector">
			<span>婚姻状况</span>
			<span :class="marry == 1?'sexActivate':''" @click="marry = 1">单身</span>
			<span :class="marry == 2?'sexActivate':''" @click="marry = 2">恋爱</span>
			<span :class="marry == 3?'sexActivate':''" @click="marry = 3">已婚</span>
		</view>
		<view class="table-selector">
			<span>生活状态</span>
			<span :class="life == 1?'sexActivate':''" @click="life = 1">工作</span>
			<span :class="life == 2?'sexActivate':''" @click="life = 2">学生</span>
			<span :class="life == 3?'sexActivate':''" @click="life = 3">自由</span>
			<span :class="life == 4?'sexActivate':''" @click="life = 4">退休</span>
		</view>
		<view class="table-selector" style="padding-bottom: 40rpx;border-bottom: 1px solid #f2f2f2;">
			<span>养宠经验</span>
			<span :class="exp == 1?'sexActivate':''" @click="exp = 1">没经验</span>
			<span :class="exp == 2?'sexActivate':''" @click="exp = 2">学习中</span>
			<span :class="exp == 3?'sexActivate':''" @click="exp = 3">经验丰富</span>
		</view>
		<view class="table">
			<span style="display: flex;align-items: center;flex-direction: row;"><image src="../../../static/img/telephone.png" style="width: 30rpx;height: 30rpx;margin-right: 20rpx;" mode=""></image>我的手机号码</span>
			<input type="text" v-model="phone" placeholder="输入手机号" />
		</view>
		<view class="table">
			<span style="display: flex;align-items: center;flex-direction: row;"><image src="../../../static/img/position.png" style="width: 30rpx;height: 30rpx;margin-right: 20rpx;" mode=""></image>我的地址</span>
			<input type="text" v-model="address" placeholder="请输入地址" />
		</view>
		<view class="table-text"><image src="../../../static/img/map.png" style="width: 30rpx;height: 30rpx;margin-right: 20rpx;" mode=""></image>留言给送养人</view>
		<textarea style="margin-bottom: 220rpx;" v-model="remark" placeholder="你想说点什么…" />
		
		<view class="button">
			<u-button type="primary" class="styleCss"  hover-class="none" shape="circle" @click="setData">提交我的资料，申请领养</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sex: 1,
			age: 1,
			live: 1,
			marry: 1,
			life: 1,
			exp: 1,
			phone:undefined,
			address:undefined,
			remark:undefined,
			options:{}
		}
	},
	methods:{
		testPhone(str) {
			const reg = /^1[3|4|5|7|8|6|9][0-9]\d{8}$/;
			return reg.test(str);
		},
		setData(){
			
			if(!this.phone){
				uni.showToast({
					title:'手机号错误',
					duration:500,
					icon:'none'
				})
				return false
			}
			if(!this.testPhone(this.phone)){
				uni.showToast({
					title:'手机号格式不正确',
					duration:500,
					icon: 'none'
				})
				return false
			}
			if(!this.address){
				uni.showToast({
					title:'地址不能为空',
					duration:500,
					icon: 'none'
				})
				return false
			}
			if(!this.remark){
				uni.showToast({
					title:'留言不能为空',
					duration:500,
					icon: 'none'
				})
				return false
			}
			let self = this;
			let data = {
				address: self.address,
				adoptId:self.options.id,
				age: self.age,
				exp: self.exp,
				life: self.life,
				live: self.live,
				marry: self.marry,
				phone: self.phone,
				remark: self.remark,
				sex: self.sex,
				
			}
			self.$request(self.commonApi.adoptApply,'POST',data,'application/json').then(res=>{
				if(res.data.code == 200){
					uni.showToast({
						title:'已发送申请',
						duration:500,
						icon: 'none'
					})
					setTimeout(()=>{
						uni.switchTab({
							url: '../../../pages/index/index'
						})
					},500)
				}
			}).catch(error=>{
				if(error.data.msg == '已存在该数据，请检查'){
					setTimeout(()=>{
						uni.switchTab({
							url: '../../../pages/index/index'
						})
					},500)
				}
			})
			
		}
	},
	onLoad(option) {
		this.options = option
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	border-top: 1px solid #f2f2f2;
	position: relative;
	.styleCss{
		width: 660rpx;
	}
	.button /deep/ .u-btn--primary{
		background: #FFCC00;
	}
	.button{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 0;
		left: 0;
		background: white;
		padding: 60rpx 0;
		z-index: 222;
	}
	textarea{
		width: 670rpx;
		height: 140rpx;
		background: #F6F6F6;
		padding: 15rpx;
		border-radius: 15rpx;
	}
	.table-text{
		width: 700rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		font-size: 28rpx;
		color: #333333;
	}
	.table{
		width: 700rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		border-bottom: 1px solid #f2f2f2;
		font-size: 28rpx;
		color: #333333;
		input{
			text-align: right;
		}
	}
	.sexActivate{
		margin-left: 25rpx !important;
		padding: 10rpx 25rpx !important;
		border-radius: 10rpx !important;
		background: rgba(255, 154, 0, 0.08) !important;
		color: #FF9A00 !important;
		font-size: 26rpx !important;
	}
	.table-selector{
		width: 700rpx;
		padding-top: 40rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		font-size: 28rpx;
		color: #333333;
		span:not(:first-child){
			margin-left: 25rpx;
			padding: 10rpx 25rpx;
			border-radius: 10rpx;
			background: #F6F6F6;
			color: #999999;
			font-size: 26rpx;
		}
	}
	.table-name{
		width: 700rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		font-size: 32rpx;
		color: #333333;
		border-bottom: 1px solid #f2f2f2;
		input{
			text-align: right;
		}
	}
}
</style>
